<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">

  <title>Bootstrap Sandbox</title>
</head>

<body>
  <header>
    <h1 class="display-3 text-center my-4">Grid System</h1>
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <div class="dropdown">
            <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
              2: Utilities
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="2_2_basic_typography.html">2.2 Basic Typography</a>
              <a class="dropdown-item" href="2_3_text_alignment_display.html">2.3 Text Alignment & Display</a>
              <a class="dropdown-item" href="2_4_floats_position.html">2.4 Floats & Position</a>
              <a class="dropdown-item" href="2_5_colors_background.html">2.5: Colors & Background</a>
              <a class="dropdown-item" href="2_6_spacing.html">2.6 Spacing</a>
              <a class="dropdown-item" href="2_7_sizing.html">2.7 Sizing</a>
              <a class="dropdown-item" href="2_8_breakpoints.html">2.8 Breakpoints</a>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="dropdown">
            <button class="btn btn-success btn-block dropdown-toggle" type="button" data-toggle="dropdown">
              3: CSS Components
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="3_2_buttons.html">3.2 Buttons</a>
              <a class="dropdown-item" href="3_3_navbar.html">3.3 Navbar</a>
              <a class="dropdown-item" href="3_4_list_groups_badges.html">3.4 List Groups & Badges</a>
              <a class="dropdown-item" href="3_5_forms.html">3.5 Forms</a>
              <a class="dropdown-item" href="3_6_input_groups.html">3.6 Input Groups</a>
              <a class="dropdown-item" href="3_7_alerts_progress.html">3.7 Alerts & Progress</a>
              <a class="dropdown-item" href="3_8_tables_pagination.html">3.8 Tables & Pagination</a>
              <a class="dropdown-item" href="3_9_cards.html">3.9 Cards</a>
              <a class="dropdown-item" href="3_10_media_object.html">3.10 Media Objects</a>
              <a class="dropdown-item" href="3_11_jumbotron.html">3.11 Jumbotron</a>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="dropdown">
            <button class="btn btn-warning btn-block dropdown-toggle" type="button" data-toggle="dropdown">
              4: Grid & Flexbox
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="4_2_grid_system.html">4.2 Grid System</a>
              <a class="dropdown-item" href="4_3_grid_alignment.html">4.3 Grid Alignment</a>
              <a class="dropdown-item" href="4_4_flexbox.html">4.4 Flexbox</a>
              <a class="dropdown-item" href="4_5_auto_margins_wrapping_order.html">4.5 Auto Margins & Wrap</a>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="dropdown">
            <button class="btn btn-danger btn-block dropdown-toggle" type="button" data-toggle="dropdown">
              5: JavaScript Widgets
            </button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="5_2_carousel.html">5.2 Carousel</a>
              <a class="dropdown-item" href="5_3_collapse.html">5.3 Collapse</a>
              <a class="dropdown-item" href="5_4_tooltips.html">5.4 Tooltips</a>
              <a class="dropdown-item" href="5_5_popovers.html">5.5 Popovers</a>
              <a class="dropdown-item" href="5_6_modals.html">5.6 Modals</a>
              <a class="dropdown-item" href="5_7_scrollspy.html">5.7 ScrollSpy</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr>
  </header>

  <div class="container">
    <!--####################START HERE####################-->

    <!-- RESPONSIVE GRID -->
    <div class="row">
      <div class="col-sm-6 col-md-8 col-lg-9 col-xl-10" style="border:1px solid #333">
        <ul>
          <li>6 column on small screens</li>
          <li>8 column on medium screen</li>
          <li>9 column on large screen</li>
          <li>10 column on xlarge screen</li>
        </ul>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2" style="border:1px solid #333">
        <ul>
          <li>6 column on small screens</li>
          <li>4 column on medium screen</li>
          <li>3 column on large screen</li>
          <li>2 column on xlarge screen</li>
        </ul>
      </div>
    </div>

    <!-- EQUAL WIDTH -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
    </div>

    <!-- EQUAL WIDTH MULTI ROW -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="w-100" style="border:1px solid #333"></div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
    </div>

    <!-- AUTO LAYOUT -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Auto Layout</div>
      <div class="col-6" style="border:1px solid #333">Auto Layout</div>
      <div class="col-4" style="border:1px solid #333">Auto Layout</div>
    </div>

    <!-- EQUAL WIDTH STACKED -->
    <div class="row">
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
    </div>

    <!-- ORDERING -->
    <div class="row">
      <div class="col order-3" style="border:1px solid #333">
        First
      </div>
      <div class="col order-2" style="border:1px solid #333">
        Second
      </div>
      <div class="col order-1" style="border:1px solid #333">
        Third
      </div>
    </div>

    <!-- OFFSETTING -->
    <div class="row">
      <!-- 6 column div offset by 3 -->
      <div class="col-md-6 offset-md-3" style="border:1px solid #333">.col-md-6 .offset-md-3</div>
    </div>
    <div class="row">
      <!-- 2 4 column divs, the second offset by 4 -->
      <div class="col-md-4" style="border:1px solid #333">.col-md-4</div>
      <div class="col-md-4 offset-md-4" style="border:1px solid #333">.col-md-4 .offset-md-4</div>
    </div>

    <div class="row">
      <!-- 2 3 column divs, both offset by 3 -->
      <div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
      <div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
    </div>

    <!-- NESTING -->
    <div class="row">
      <div class="col-sm-9" style="border:1px solid blue">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6" style="border:1px solid red">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6" style="border:1px solid red">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>

    <div style="margin-top:500px;"></div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
      crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
      crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
      crossorigin="anonymous"></script>
</body>

</html>